<template>
  <el-form
    class="form-container"
    :inline="inline"
    :model="form.models"
    :label-width="labelWidth"
    ref="form"
  >
    <el-form-item
      v-for="(item, index) in form.items"
      :style="{
        display: item.hide ? 'none' : inline ? 'inline-block' : 'block',
      }"
      :label="item.label"
      :key="index"
      :prop="index"
      :rules="item.rules"
      :class="item.formItemClass"
    >
      <el-input
        autocomplete="off"
        :style="item.style"
        v-if="item.type === 'input' || item.type === 'textarea'"
        :type="item.type"
        :row="item.row"
        v-model="form.models[index]"
        :disabled="item.disabled"
        :placeholder="item.placeholder"
        @input="item.input"
        @click="item.click"
        @focus="item.focus"
        @change="item.change"
      ></el-input>

      <el-select
        :style="item.style"
        v-else-if="item.type === 'select'"
        v-model="form.models[index]"
        :placeholder="item.placeholder"
        :multiple="item.multiple"
        @change="item.change"
        :filterable="item.filterable"
        :allow-create="item.allowCreate"
        :default-first-option="item.defaultFirstOption"
      >
        <div v-if="item.group">
          <el-option-group
              v-for="group in item.options"
              :key="group.label"
              :label="group.label">
            <el-option
                v-for="opt in group.options"
                :key="opt.key"
                :label="opt.label"
                :value="opt.value">
            </el-option>
          </el-option-group>
        </div>
        <div v-else>
          <el-option
              v-for="opt in item.options"
              :key="opt.key"
              :label="opt.label"
              :value="opt.value"
          ></el-option>
        </div>
      </el-select>

      <el-checkbox-group
        v-model="form.models[index]"
        v-else-if="item.type === 'checkbox'"
        :style="item.style"
        @change="item.change"
      >
        <el-checkbox
          v-for="opt in item.options"
          :label="opt.label"
          :key="opt.key"
          @change="item.changeSingle"
        ></el-checkbox>
      </el-checkbox-group>

      <div
        v-else-if="item.type === 'tags'"
        class="tags-container"
        @click="item.click"
        :style="item.style"
      >
        <el-tag
          :closable="item.closable"
          v-for="opt in item.options"
          :key="opt.key"
          @close="item.close(opt.label)"
          >{{ opt.label }}</el-tag
        >
        <span v-if="item.options.length === 0">{{ item.emptyMsg }}</span>
      </div>

      <c-search-select
        v-else-if="item.type === 'searchSelect'"
        v-model:value="form.models[index]"
        :load="item.load"
        v-model:options="item.options"
      ></c-search-select>

      <el-cascader
        v-else-if="item.type === 'cascader'"
        :ref="item.ref"
        v-model="form.models[index]"
        :options="item.options"
        :props="item.props"
        :style="item.style"
        :filterable="item.filterable"
        @change="item.change"
      ></el-cascader>

      <c-select-tree
        v-model:treeVal="form.models[index]"
        :change="item.change"
        :style="item.style"
        v-else-if="item.type === 'selectTree'"
        :props="item.props"
        :options="item.options"
        :node-click="nodeClick"
      ></c-select-tree>

      <component
        :is="item.render"
        v-else-if="item.type === 'component'"
        :style="item.style"
        :props="item?.props"
      ></component>
    </el-form-item>
  </el-form>
</template>

<script>
import SelectTree from '@/components/SelectTree.vue';
import SearchSelect from '@/components/SearchSelect.vue';

export default {
  name: 'Form',
  components: {
    'c-select-tree': SelectTree,
    'c-search-select': SearchSelect,
  },
  methods: {
    nodeClick(val) {
      console.log();
    },
  },
  props: {
    form: {
      type: Object,
      default: function () {
        // eslint-disable-next-line @typescript-eslint/no-array-constructor
        return new Array();
      },
    },
    inline: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: '80px',
    },
  },

  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.tags-container {
  cursor: pointer;
  .el-tag {
    margin: 0 3px;
  }
}
</style>
